@use './src/styles/vendor/variables' as vv;

/* Basics */
html {
  background-color: vv.$body-bg;
}

html,
body {
  font-size: 12px;
  height: 100%;
  width: 100%;
}

option {
  font-style: normal;
  font-weight: normal;
}

mark {
  background-color: vv.$yellow;
  padding: 0;
}

.full-height {
  height: 100vh;
}

.full-width {
  width: 100vw;
}

.vertical-align {
  align-items: center;
  display: flex;
}

.horizontal-align {
  display: flex;
  justify-content: center;
}

.loading:not(cd-api-docs *) {
  left: 50%;
  position: absolute;
  top: 50%;
}

.margin-right-md {
  margin-right: 15px;
}

.no-border {
  border: 0;
  box-shadow: 0 0 0 !important;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

.text-right {
  text-align: right;
}

.text-monospace {
  font-family: monospace;
}

.text-pre-wrap {
  white-space: pre-wrap;
}

.text-pre {
  white-space: pre;
}

.icon-danger-color {
  color: vv.$danger;
}

.icon-warning-color {
  color: vv.$warning;
}

.border-warning {
  border-left: 4px solid vv.$warning;
}

.border-danger {
  border-left: 4px solid vv.$danger;
}

.border-info {
  border-left: 4px solid vv.$info;
}

.border-success {
  border-left: 4px solid vv.$success;
}

.vertical-line {
  border-left: 1px solid vv.$gray-400;
}

.accordion {
  .card {
    border: 0;
  }

  .card-header {
    border: 0;
    border-bottom: 3px solid vv.$white;
    padding-left: 0;

    .btn:focus,
    .btn.focus {
      box-shadow: none;
    }

    button.dropdown-toggle {
      position: relative;

      &::after {
        border: 0;
        content: '\f054';
        font-family: 'ForkAwesome';
        font-size: 1rem;
        position: absolute;
        right: 20px;
        transition: transform 0.3s ease-in-out;
      }

      &[aria-expanded='true']::after {
        transform: rotate(90deg);
      }
    }
  }
}
